import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PieRoseProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    tooltip?: object;
    legend?: object;
    seriesName?: string[];
    seriesRadius?: number[][];
    seriesCenter?: string[][];
    seriesRoseType?: string[];
    seriesShowLabel?: boolean[];
    seriesData?: { value: number; name: string }[][];
}

@customElement('lit-pie-rose')
export class LitPieRose extends LitElement {
    @property({type: String}) chartId: string = 'pie-rose-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = undefined;
    @property({type: Object}) tooltip: any = undefined;
    @property({type: Object}) legend: any = undefined;
    @property({type: Array}) seriesName: string[] = [];
    @property({type: Array}) seriesRadius: number[][] = [];
    @property({type: Array}) seriesCenter: string[][] = [];
    @property({type: Array}) seriesRoseType: string[] = [];
    @property({type: Array}) seriesShowLabel: boolean[] = [];
    @property({type: Array}) seriesData: { value: number; name: string }[][] = [];

    getSeries(): any[] {
        return this.seriesName.map((name, index) => ({
            name: name,
            type: 'pie',
            radius: this.seriesRadius[index],
            center: this.seriesCenter[index],
            roseType: this.seriesRoseType[index],
            itemStyle: {
                borderRadius: 5
            },
            label: {
                show: this.seriesShowLabel[index]
            },
            emphasis: this.seriesShowLabel[index] ? undefined : {
                label: {
                    show: true
                }
            },
            data: this.seriesData[index]
        }));
    }

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: this.tooltip,
        legend: this.legend,
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: this.getSeries()
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        this.option.tooltip = this.tooltip;
        this.option.legend = this.legend;
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-pie-rose': LitPieRose;
    }
}